<template>
  <div class="user-profile">
    <van-nav-bar 
      class="page-nav-bar" 
      @click-left="$router.back()" 
      title="个人信息"
      left-arrow
    />
    <!-- 头像点击的时候触发文件选择器的点击事件 -->
    <van-cell title="头像"  @click="$refs.img.click()" is-link>
      <van-image 
        round
        :src="userinfo.photo"
        width="25"
        height="25"
        fit="cover"
       />
    </van-cell>
    <!-- 文件选择器 -->
    <input type="file" hidden @change="fileChange" ref="img" >

    <van-cell title="姓名"  @click="isEditName=true"  is-link>
      <span>{{userinfo.name}}</span>
    </van-cell>
    <van-cell title="性别"  @click="isEditSex=true"  is-link>
      <span>{{userinfo.gender === 1 ? '女':'男'}}</span>
    </van-cell>
    <van-cell title="生日" @click="isEditBirthday=true" is-link>
      <span>{{ userinfo.birthday }}</span>
    </van-cell>

     <!-- 编辑头像弹框 -->
    <van-popup v-model="isEditPhoto" position="bottom">
      <edit-photo
        @close="isEditPhoto=false"
        v-model="userinfo.photo"
        :img-src="imgUrl"
         v-if="isEditPhoto"
      />
    </van-popup>
    <!-- /编辑头像弹框 -->

     <!-- 编辑昵称弹框 -->
    <van-popup v-model="isEditName" position="bottom" style="height:100vh">
      <edit-name 
        @close="isEditName=false"
        v-model="userinfo.name"
        v-if="isEditName"
      />
    </van-popup>
    <!-- /编辑昵称弹框 -->

    <!-- 编辑性别弹框 -->
    <van-popup v-model="isEditSex" position="bottom" >
      <edit-sex 
        @close="isEditSex=false" 
        v-model="userinfo.gender"
         v-if="isEditSex"
      />
    </van-popup>
    <!-- /编辑性别弹框 -->

    <!-- 编辑生日弹框 -->
    <van-popup v-model="isEditBirthday" position="bottom">
      <edit-birthday 
        v-model="userinfo.birthday"
        @close="isEditBirthday=false" 
         v-if="isEditBirthday"
      />
    </van-popup>
    <!-- /编辑生日弹框 -->

  </div>
</template>

<script>
import editBirthday from './components/edit-birthday.vue'
import editSex from './components/edit-sex.vue'
import editName from './components/edit-name.vue'
import editPhoto from './components/edit-photo.vue'
import { getUserInfo } from '@/api/user'
  export default {
    components: { editBirthday,editSex ,editName,editPhoto},
    name:'UserProfile',
    data() {
      return {
        isEditSex: false, // 编辑性别
        isEditBirthday:false, // 编辑生日
        isEditPhoto:false, // 编辑头像
        isEditName:false, // 编辑昵称
        userinfo:{},  // 用户资料
        imgUrl:'' // 图片预览地址
      }
    },
    created () {
      this.loadUserProfile()
    },
    methods: {
      // 加载用户资料
      async loadUserProfile() {
        try {
          const { data:res } = await getUserInfo()
          this.userinfo = res.data
        } catch (error) {
          console.log(error);
          this.$toast.fail('获取用户资料失败')
        }
      },
      // 文件选择器
      fileChange(){
        const file = this.$refs.img.files[0] // 文件信息
        let gs = file.type.split('/')[1]
        if(!['png','jpg','jpeg','gif'].includes(gs) ){
          this.$refs.img.value = ''
          return this.$toast.fail('格式不正确')
        }
        // 文件生成一个预览地址
        this.imgUrl = URL.createObjectURL(file)
        // 打开组件
        this.isEditPhoto = true
        // 清空
        this.$refs.img.value = '' // 为了解决相同文件反复选择会不触发change
      }
    },
  }
</script>

<style lang="less" scoped>

</style>